<template>
	<view class="page" :style="{'--color': color}">
		<status-bar title='信息发布'></status-bar>
		<view class="padding20">
			<view class="card">
				<!-- <view class="item">
					<view class="size28 color_33">发布区域</view>
					<text class="iconfont icon-bitian"></text>
					<picker mode="region" :value="region" @change="regionChange">
						<input class="size28 color_33" v-model="regionName" placeholder="请选择发布区域" disabled />
					</picker>
				</view> -->
				<view class="item">
					<view class="size28 color_33">具体描述</view>
					<text class="iconfont icon-bitian"></text>
				</view>
				<textarea class="textarea size28" v-model="content" placeholder="请输入具体描述" :maxlength="-1" disable-default-padding />
				
				<view class="h6 m-bot10">最多上传9张图片</view>
				<view class="row">
					<view class="list" v-for="(item,index) in imgList" :key="index">
						<image :src="$imgUrls(item)" mode="aspectFill" @click="$previewImgs(index, imgList)"></image>
						<view class="delBtn flexac p-ab" @click.stop="delImg(index)">
							<text class="iconfont icon-guanbi2 size32 white"></text>
						</view>
					</view>
					<view class="list" v-if="imgList.length < 9" @click="selectImgs">
						<image :src="staticUrl + '/images/jh_up/addImg.png'"></image>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="size28 color_33 p-top30">联系人信息</view>
				<view class="item">
					<view class="size28 color_33">联系人</view>
					<text class="iconfont icon-bitian"></text>
					<input class="size28 color_33" v-model="uname" placeholder="请输入姓名" />
				</view>
				<view class="item">
					<view class="size28 color_33">联系手机</view>
					<text class="iconfont icon-bitian"></text>
					<input class="size28 color_33" v-model="utel" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="card" style="padding: 30rpx 20rpx;" v-if="top_config.length">
				<view class="size28 color_FOD m-bot30">信息类目置顶</view>
				<view class="row">
					<view class="option flexac f-column" @click="top_option = item" :class="{'active': top_option.days == item.days}" v-for="(item,index) in top_config" :key="index">
						<view class="size32 color_33 m-bot10">置顶{{ item.days }}天</view>
						<view class="price">
							<text class="h6">￥</text>
							<text class="size36">{{ item.price }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card" style="padding: 30rpx 20rpx;" v-if="show_config.length">
				<view class="size28 color_FOD m-bot30">信息发布天数</view>
				<view class="row">
					<view class="option flexac f-column" @click="show_option = item" :class="{'active': show_option.days == item.days}" v-for="(item,index) in show_config" :key="index">
						<view class="size32 color_33 m-bot10">{{ item.days }}天</view>
						<view class="price">
							<text class="h6">￥</text>
							<text class="size36">{{ item.price }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card d-flex a-center" style="padding: 20rpx;" @click="agree = !agree" v-if="release">
				<view class="radio flexac m-right10" :class="{'active': agree}">
					<text class="iconfont icon-xuanzhong"></text>
				</view>
				<view class="size28 color_33">我已阅读并同意<text class="size28 thmeColor" @click.stop="show = true">《发布规则》</text></view>
			</view>
		</view>
		<view class="bottom bgwhite flexac">
			<view class="btn flexac size32 white" @click="publish">{{ total > 0 ? `支付${total}元` : '立即发布' }}</view>
		</view>

		<showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>

		<u-popup :show="show" :round="10" @close="show = false">
            <view class="botPop d-flex f-column p-top40">
                <view class="size30 bold text-center p-bot20">发布规则</view>
				<view class="flex-1 scroll-y padding10">
					<u-parse :content="release" :domain="imgUrl"></u-parse>
				</view>
				<view class="bar flexac">
					<view class="btn flexac size30 white" @click="show = false">我知道了</view>
				</view>
            </view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				staticUrl: this.staticUrl,
				imgUrl: this.imgUrl,
				region: [],
				regionName: '',
				content: '',
				imgList: [],
				uname: '',
				utel: '',
			    classifyid: '',
				genre: 1,
				showModal: false,
				showTip: 0, // 通联支付成功提示
				show_config: [],
				show_option: '',
				top_config: [],
				top_option: '',
				release: '',
				agree: false,
				show: false
			}
		},
		computed:{
			...mapState(['color', 'bid', 'userInfo', 'vid']),
			total() {
				let show_price = this.show_option.price || 0 // 发帖费
				let top_price = this.top_option.price || 0 // 置顶费
				return parseFloat(show_price) + parseFloat(top_price)
			}
		},
		onLoad(e) {
			if(e.classifyid) this.classifyid = e.classifyid
			if(e.genre) this.genre = e.genre
			
			this.uname = this.userInfo.nickname || ''
			this.utel = this.userInfo.phone || ''
			this.getUpDay()
		},
		onShow() {
			let options = wx.getEnterOptionsSync()
			if(options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3' && this.showTip == 1) {
				let extraData = options.referrerInfo.extraData
				if(!extraData) return
				if(extraData.code == 'success') {
					this.$Toast('支付成功', 2)
				}
			}
		},
		methods: {
			getUpDay() {
				this.$http.get({
					url: '/accountPay/getUpDayConfig',
					data: {
						classifyid: this.classifyid
					}
				}).then(res => {
					if(res.code != 100) return this.$Toast(res.msg)
					let result = res.pay_data || ''
					if(result.show_state == 1) this.show_config = result.show_config || []
					if(this.show_config.length) this.show_option = this.show_config[0]
					if(result.top_state == 1) this.top_config = result.top_config || []
					if(this.top_config.length) this.top_option = this.top_config[0]
					this.release = res.release
				})
			},
			regionChange(e) {
				console.log(e)
				this.regionName = e.detail.value.join('/')
			},
			selectImgs() {
				let count = 9 - this.imgList.length
				uni.chooseImage({
					count,
					success: res => {
						let temp = res.tempFilePaths
						this.$showLoading('上传中~')
						temp.forEach((item, index) => {
							this.$common.uploadFile('/zzjApp/uploade?bid=' + this.bid, item).then(res2 => {
								if(res2.errcode != 100) return this.$Toast('上传失败')
								let url = res2.url.substring(22)
								this.imgList.push(url)
								if(index == temp.length - 1) this.$hideLoading()
							})
						})
					}
				})
			},
			delImg(index) {
				this.imgList.splice(index, 1)
			},
			publish(){
				if(!this.vid) return this.showModal = true
				if(!this.content) return this.$Toast('内容不能为空')
				if(this.genre == 2 && !this.imgList.length) return this.$Toast('未上传图片')
				if(!this.uname) return this.$Toast('姓名不能为空')
				if(!this.utel) return this.$Toast('手机号码不能为空')
				if(this.release && !this.agree) return this.$Toast('请阅读并勾选发布规则')
				this.$http.post({
					url:'/communityApi/upNewContent',
					data:{
						imgUrl: this.imgList.toString(),
						classifyid: this.classifyid,
						content: this.content,
						uname: this.uname,
						utel: this.utel
					}
				}).then(res => {
					if(res.code != 100) return this.$Toast(res.msg)
					if(this.total > 0) {
						this.getPay(res.data)
						return
					}
					this.$Toast(res.msg, 2)
				})
			},
			getPay(file_id) {
				let that = this
				let params = {
					file_id,
					classifyid: this.classifyid
				}
				if(this.show_option) {
					params.type2 = this.show_option.type
					params.times2 = this.show_option.times
				}
				if(this.top_option) {
					params.type = this.top_option.type,
					params.times = this.top_option.times
				}
				this.$http.get({
					url: '/accountPay/getUserSpacePay',
					data: params
				}).then(res => {
					if(res.code != 100) return this.$Toast(res.msg)
					let Result = res.data
					// #ifdef MP-WEIXIN
					if(Result.extraData) {
						this.showTip = 1
						wx.openEmbeddedMiniProgram({
							appId: Result.appId,
							extraData: Result.extraData
						})
					} else {
						uni.getProvider({
							service: 'oauth',
							success: function(resp) {
								if (resp.provider) {
									uni.requestPayment({
										provider: resp.provider[0],
										orderInfo: Result,
										timeStamp: Result.timeStamp,
										nonceStr: Result.nonceStr,
										package: Result.package,
										signType: Result.signType,
										paySign: Result.paySign,
										success: function(resj) {
											console.log('success:' + JSON.stringify(resj))
											that.$Toast('支付成功', 2)
										},
										fail: function(err) {
											console.log('fail:' + JSON.stringify(err))
										}
									})
								}
							}
						})
					}
					// #endif
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f8f8f8;
		padding-bottom: calc(130rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
	}
	.card {
		background: #fff;
		border-radius: 10rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		.item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #efefef;
			display: flex;
			align-items: center;
			.icon-bitian {
				color: $uni-color-price;
				margin: 0 10rpx;
			}
		}
		.textarea {
			width: 100%;
			height: 360rpx;
			padding: 30rpx 0;
		}
		.list {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
			overflow: hidden;
			margin: 0 30rpx 30rpx 0;
			position: relative;
			&:nth-child(3n) {
				margin-right: 0 !important;
			}
			.delBtn {
				width: 40rpx;
				height: 40rpx;
				background: rgba(0,0,0,.6);
				border-radius: 50%;
				top: 6rpx;
				right: 6rpx;
			}
		}
		.option {
			width: 200rpx;
			height: 150rpx;
			border: 2rpx solid #bbb;
			border-radius: 10rpx;
			margin: 0 20rpx 20rpx 0;
			&.active {
				background: #fcf4c5;
				border: 2rpx solid #dcd37a;
			}
			.price {
				color: #e68e4d;
			}
		}
		.radio {
			width: 40rpx;
			height: 40rpx;
			border: 2rpx solid #cdcdcd;
			border-radius: 50%;
			&.active {
				background: var(--color);
				border: 2rpx solid var(--color);
			}
		}
	}
	.bottom {
		width: 100%;
		border-top: 1rpx solid #f2f2f2;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		padding-top: 20rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		.btn {
			width: 460rpx;
			height: 90rpx;
			background-color: var(--color);
			border-radius: 50rpx;
		}
	}
	.botPop {
		height: 60vh;
		.bar {
			height: 112rpx;
			border-top: 1rpx solid #dadbde;
		}
		.btn {
			width: 394rpx;
			height: 76rpx;
			background-color: var(--color);
			border-radius: 38rpx;
		}
	}
</style>
